<template>
    <div id="share">
        <van-nav-bar
            right-text="分享"
            left-text="返回"
            @click-right="shareMusic()"
            left-arrow
            @click-left="close()"
        />
        <textarea
            v-model="content"
            placeholder="请输入内容"
            class="textarea"
        ></textarea>
        <van-row class="content">
            <van-col span="4">
                <img :src="musicMsg.pic_url" alt="" />
            </van-col>
            <van-col span="16" offset="1">
                <p class="title">
                    {{ musicMsg.name }}
                </p>
                <p class="name">
                    {{ musicMsg.artist }}
                </p>
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: String,
            defalut: "",
        },
    },
    name: "Share",
    data() {
        return {
            musicMsg: {},
            content: "",
        };
    },
    methods: {
        shareMusic() {
            let params = {
                id: this.id,
                content: this.content,
            };
            console.log(params);
            this.$axios
                .post("user/share", params)
                .then((res) => {
                    if (res.status === 200) {
                        this.$emit("closeShare");
                        this.$notify({ type: "success", message: "分享成功" });
                    } else {
                        this.$notify("分享失败");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        close() {
            this.$emit("closeShare");
        },
        init() {
            let id = this.id;
            this.$axios
                .get(`user/share/${id}`)
                .then((data) => {
                    if (data.status === 200) {
                        this.musicMsg = data.data;
                    } else {
                        this.$notify("初始化失败");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    computed: {},
    mounted() {
        this.init();
    },
};
</script>

<style lang="less">
#share {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background-color: white;
    .return {
        width: 0.5rem;
    }
    .textarea {
        width: 100vw;
        height: auto;
        border: none;
        padding: 0.4rem;
    }
    .content {
        height: 1rem;
        line-height: 0.5rem;
        margin: 0 0.4rem;
        border: 1px transparent solid;
        border-image: linear-gradient(to right, #000718, #14b5ca) 10 10;
        overflow: hidden;
        img {
            display: block;
            height: 1rem;
        }
    }
}
</style>
